<template>
	<div class="flex-center">
		<div class="bottle-state-circle-icon" :style="{ background: setTagStateStyle(status).color }">
			<div class="bottle-state-circle-shadow" :style="{ borderColor: setTagStateStyle(status).color }"></div>
		</div>
		<span>{{ setTagStateStyle(status).name }}</span>
	</div>
</template>
<script>
    export default {
        name: 'JkBaseStatus',
        props: {
            status: {
                type: [String, Number],
                default: ''
            },
            size: {
                type: String,
                default: 'mini'
            },
            type: {
                type: String,
                default: 'primary'
            }
        },
        data() {
            return {
                isActive: false
            };
        },
        methods: {
            setTagStateStyle(state) {
                if (state === 0) {
                    return {
                        color: '#808695',
                        name: '停用'
                    };
                } else if (state === 1) {
                    return {
                        color: '#19be6b',
                        name: '启用'
                    };
                }
            }
        }
    };
</script>
<style scoped lang="scss">
.bottle-state-circle-icon {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    .bottle-state-circle-shadow {
        border-style: solid;
        border-width: 1px;
        border-radius: 50%;
        flex-shrink: 0;
        //animation: stateCircle .8s ease-in infinite;
    }
}
@keyframes stateCircle {
    0% {
        width: 150%;
        height: 150%;
        opacity: .8;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: .5;
    }
    100% {
        width: 300%;
        height: 300%;
        opacity: .1;
    }
}
</style>
